<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen bg-gray-100">
    <!-- 顶部导航栏 -->
    <header class="bg-orange-500 text-white p-4 flex items-center">
    <button class="flex items-center cursor-pointer">
    <el-icon class="text-xl"><ArrowLeft /></el-icon>
    </button>
    <h1 class="text-xl font-medium mx-auto pr-6">订单支付成功</h1>
    </header>
    <!-- 成功提示区域 -->
    <div class="flex flex-col items-center justify-center py-12 bg-gray-100">
    <div class="rounded-full bg-green-500 p-4 mb-4 w-16 h-16 flex items-center justify-center">
    <el-icon class="text-white text-4xl"><Check /></el-icon>
    </div>
    <p class="text-xl font-medium">订单支付成功！</p>
    </div>
    <!-- 订单信息卡片 -->
    <div class="mx-4 bg-white rounded-lg shadow-sm">
    <div class="border-b border-gray-200 p-4">
    <h2 class="text-gray-700 font-medium">订单信息</h2>
    </div>
    <div class="p-4">
    <div class="flex justify-between py-3 border-b border-gray-100">
    <span class="text-gray-500">订单编号：</span>
    <span class="text-gray-800">{{ orderNumber }}</span>
    </div>
    <div class="flex justify-between py-3 border-b border-gray-100">
    <span class="text-gray-500">支付方式：</span>
    <span class="text-gray-800">{{ paymentMethod }}</span>
    </div>
    <div class="flex justify-between py-3 border-b border-gray-100">
    <span class="text-gray-500">支付时间：</span>
    <span class="text-gray-800">{{ paymentTime }}</span>
    </div>
    </div>
    </div>
    <!-- 商品信息卡片 -->
    <div class="mx-4 mt-4 bg-white rounded-lg shadow-sm">
    <div class="border-b border-gray-200 p-4">
    <h2 class="text-gray-700 font-medium">商品信息</h2>
    </div>
    <div class="p-4">
    <div class="flex items-start">
    <div class="w-20 h-20 rounded-md overflow-hidden mr-3 flex-shrink-0">
    <img :src="courseImage" class="w-full h-full object-cover" alt="课程图片" />
    </div>
    <div class="flex-1">
    <h3 class="text-gray-800 font-medium mb-1">{{ courseName }}</h3>
    <p class="text-gray-500 text-sm">{{ courseDescription }}</p>
    <div class="flex justify-between mt-2">
    <span class="text-orange-500 font-medium">¥{{ coursePrice }}</span>
    <span class="text-gray-500">数量：{{ quantity }}</span>
    </div>
    </div>
    </div>
    </div>
    </div>
    <!-- 价格信息卡片 -->
    <div class="mx-4 mt-4 bg-white rounded-lg shadow-sm">
    <div class="p-4">
    <div class="flex justify-between py-2">
    <span class="text-gray-500">商品金额</span>
    <span class="text-gray-800">¥{{ coursePrice }}</span>
    </div>
    <div class="flex justify-between py-2">
    <span class="text-gray-500">优惠券</span>
    <span class="text-orange-500">-¥{{ discount }}</span>
    </div>
    <div class="flex justify-between py-2 border-t border-gray-100 mt-2">
    <span class="font-medium">实付金额</span>
    <span class="text-orange-500 font-medium text-lg">¥{{ actualPaid }}</span>
    </div>
    </div>
    </div>
    <!-- 操作按钮 -->
    <div class="mx-4 mt-8 mb-8 flex space-x-4">
    <button class="flex-1 py-3 border border-gray-300 rounded-lg text-gray-700 font-medium cursor-pointer !rounded-button whitespace-nowrap">查看订单</button>
    <button class="flex-1 py-3 bg-orange-500 text-white rounded-lg font-medium cursor-pointer !rounded-button whitespace-nowrap">返回首页</button>
    </div>
    </div>
    </template>
    <script lang="ts" setup>
    import { ref } from 'vue';
    import { Check, ArrowLeft } from '@element-plus/icons-vue';
    // 订单信息
    const orderNumber = ref('202505061234567890');
    const paymentMethod = ref('微信支付');
    const paymentTime = ref('2025-05-06 14:30:25');
    // 课程信息
    const courseName = ref('静阅瑜伽1元体验课');
    const courseDescription = ref('初级入门瑜伽课程，适合所有年龄段人群');
    const coursePrice = ref('1.00');
    const quantity = ref(1);
    const discount = ref('0.00');
    const actualPaid = ref('1.00');
    // 课程图片
    const courseImage = ref('https://readdy.ai/api/search-image?query=Professional%20yoga%20class%20with%20peaceful%20atmosphere%2C%20a%20yoga%20mat%20on%20wooden%20floor%2C%20soft%20lighting%2C%20minimalist%20studio%20environment%2C%20serene%20and%20calming%20setting%2C%20perfect%20for%20beginners%2C%20high%20quality%20photography&width=400&height=400&seq=yoga1&orientation=squarish');
    </script>
    <style scoped>
    /* 自定义样式 */
    .page_success-icon {
    color: #fff;
    font-size: 24px;
    }
    /* 移除数字输入框的箭头 */
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    }
    </style>
    